$(function () {

  var currentPage = 1; //记录当前页
  var pageSize = 4; // 每页条数


  // 1-首页数据渲染
  // 1- ajax去后台获取用户的数据
  // 2- 通过模板引擎渲染到页面中  
  function render () {
    $.ajax({
      type: 'get',
      url: '/user/queryUser',
      data: {
        page: currentPage,
        pageSize: pageSize
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        //  渲染
        $('tbody').html(template('tmp', res));
       //  res.total 数据库数据总数 
        setPage(res.total);
      }
    })
  }
  render();

  // 2、禁用启用用户
  // 1- 点击 禁用/启用 按钮，获取当前用户的id和要进行的操作， 弹出模态框 
  // 2- 当用户点击确定按钮后， 通知后台进行对应操作 
  // 3- 操作完成后，前端需要重新渲染 ， 要看到操作的效果 
  var id = null; //存放id
  var isDelete = null; //存储要进行操作 0 禁用  1 启用
  $('tbody').on('click', '.btn', function () {
    // id = $(this).parent().attr('data-id');
    id = $(this).parent().data('id');  // jq提供 获取data-开头的自定义属性方法 
    // 确定要进行操作 
    isDelete = $(this).hasClass('btn-success') ? 1 : 0;
    console.log(id, isDelete);
  });

  // 2- 当用户点击确定按钮后， 通知后台进行对应操作 
  // 3- 操作完成后，前端需要重新渲染 ， 要看到操作的效果 
  $('.btn-ok').click(function () {
    $.ajax({
      type: 'post',
      url: '/user/updateUser',
      data: {
        id: id,
        isDelete: isDelete
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        // 页面重新渲染
        render();
        // 隐藏模态框 
        $('.modal-user').modal('hide');
      }
    })
  })

  // 3- 生成分页 标签 
  // 分页标签个数 由后台数据库数据总数决定
  // total:  表示数据库数据总数
  function setPage (total) {
    // 使用插件生成分页标签 
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage,//当前页 高亮按钮 
      totalPages: Math.ceil(total / pageSize), //总页数 = Math.ceil(数据库数据总数 / 每页数据条数)
      onPageClicked: function (event, originalEvent, type, page) { //分页按钮被点击事件 
        //为按钮绑定点击事件 page:当前点击的按钮值
        console.log(page);
        // 1- 改变当前页取值
        currentPage = page;
        // 2- 页面重新渲染
        render();
      }
    });
  }




})